<template>
    <div class="container">
        <div class="login">
            <div class="login_box">
                 <el-tabs v-model="activeName" type="border-card" center>
                    <el-tab-pane label="用户登录" name="first">
                        <el-form :model="LoginUser" :rules="rules" status-icon ref="ruleForm" class="demo-ruleForm" >
                                <el-form-item prop="loginName" class="loginForm">
                                <el-input prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="LoginUser.loginName"></el-input>
                                </el-form-item>
                                <el-form-item prop="loginPass">
                                <el-input
                                    prefix-icon="el-icon-view"
                                    type="password"
                                    placeholder="请输入密码"
                                    v-model="LoginUser.loginPass"
                                ></el-input>
                                </el-form-item>
                                <div class="btnStyle">                
                                    <Vcode :show="VcodeShow" @success="success" @close="close" />
                                    <el-button size="medium" type="primary" @click="login" >登录</el-button>
                                    <el-button size="medium" type="primary" @click="reSetLogin" >重置</el-button>
                                </div>
                            </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="用户注册" name="second">
                        <Register></Register>
                    </el-tab-pane>
                </el-tabs>

            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>

import Vcode from "vue-puzzle-vcode";
import Register from "./Register.vue";
import Footer from "./foot.vue";
import http from '../utils/http'

export default {
    data() {
        let validateName = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("请输入用户名"));
            }
            // 用户名以字母开头,长度在5-16之间,允许字母数字下划线
            const userNameRule = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
            if (userNameRule.test(value)) {
                this.$refs.ruleForm.validateField("checkPass");
                return callback();
            } else {
                return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
            }
            };
            // 密码的校验方法
        let validatePass = (rule, value, callback) => {
            if (value === "") {
                return callback(new Error("请输入密码"));
            }
            // 密码以字母开头,长度在4-23之间,允许字母数字和下划线
            const passwordRule = /(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{4,23}/;
            if (passwordRule.test(value)) {
                this.$refs.ruleForm.validateField("checkPass");
                return callback();
            } else {
                return callback(
                new Error("密码以字母开头,长度在4-23之间,允许字母数字和下划线")
                );
            }
    };
        return{           
            VcodeShow:false,
            activeName: 'first',
            LoginUser: {
                loginName: "",
                loginPass: ""
            },
            rules: {
                loginName: [{ validator: validateName, trigger: "blur" }],
                loginPass: [{ validator: validatePass, trigger: "blur" }],
            },
        
        }
    },
    components: {
        Vcode,Register,Footer
    },
    methods:{
        login(){
            this.$refs["ruleForm"].validate(valid => {
                if(valid){
                    this.VcodeShow = true
                }else{
                    return false
                }
            })
        },
        reSetLogin(){
            this.LoginUser.loginName =  "",
            this.LoginUser.loginPass = ""
        },
        success(){
            this.VcodeShow = false
            console.log(this.LoginUser.loginName,this.LoginUser.loginPass)
            http.login(this.LoginUser.loginName,this.LoginUser.loginPass).then(res=>{
                console.log(res)
            })

        },
        close(){
             this.VcodeShow = false
        }
    }
}
</script>



<style lang="scss" scoped>
    .container{
        .login{
            width: 100%;
            height: 95.9vh;
            background: url('../images/登录壁纸.png');
            background-size: 100% 100%;
            position: relative;  
            &_box{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(20%,-90%);
                width: 400px;
                background: #fff;
                .loginBtn{
                    width: 100%;
                    display: flex;
                    justify-content: center;
                }
            }
        }
        
    }
.loginForm{
    height: 40px;
}
.btnStyle{
    display: flex;
    justify-content: center;
}
</style>